<template>
	<div class="account">
        <myNavbar title="账户消息"></myNavbar>
		<list class="account_item_content">
			<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
			         :display="refreshing ? 'show' : 'hide'">
			    <text class="indicator-text">{{refreshTitle}}</text>
			</refresh>
			<cell v-for="item in accounts">
				<div class="account_item">
					<div><text class="account_time">{{item.sendDate}}</text></div>
					<div class="account_item_box" @click="toAccount(item.msgContent.type)">
						<div class="item_box_head">
							<div><text class="box_head_tittle">{{item.msgContent.memo}}</text></div>
							<icon class="icon" content="tb-right" fontSize="38"></icon>
						</div>
						<div class="head_subtitle_content"><text class="box_head_subtitle">{{item.msgContent.title}}</text></div>
						<div class="head_number_content"><text class="box_head_number">{{item.msgContent.amount}}</text></div>
						<div class="head_balance_content"><text class="box_head_balance">当前账户总余额 {{item.msgContent.balance}}</text></div>
						<div class="head_notice_content" v-if="item.msgContent.expireDate!=null"><text class="box_head_notice">余额有效期至{{item.msgContent.expireDate}}，请及时消费使用</text></div>
					</div>
				</div>
			</cell>
			<cell style="flex: 1;">
			    <noDate v-if="accounts.length == 0" noDataText="您还没有相关的账户消息"></noDate>
			</cell>
			<loading class="loading" @loading="onloading"
			         :display="loadinging ? 'show' : 'hide'">
			    <text class="indicator-text">加载中...</text>
			</loading>
		</list>
	</div>
</template>
<script>
	const eeui = app.requireModule('eeui');
	import {
		list,
		markAsRead,
		unReadCount,
		update
	} from "../../../../api/msgPush"
	import noDate from '../../../../components/noData/noData.vue'
    import myNavbar from '../../../../components/myNavbar/myNavbar.vue'
	export default {
		name: 'account',
		data() {
			return {
				loadinging: false,
				refreshing:false,
				pageSize: 10,
				msgKey: 'msg-account',
				accounts: [],
				refreshTitle:'释放刷新页面...'
			}
		},
		created() { // 在实例创建完成后被立即调用
		this.loadMsgList()
		},
		methods: {
			toAccount(e){
			    let type = e
			    if(type==1){
			      //会员卡
				  const eeui = app.requireModule('eeui');
				  eeui.openPage({url: 'root://pages/member/saveCard/saveCard.js',statusBarType: 'immersion',statusBarStyle:false},
				  	(result) => {
				  		console.log('成功')
				  	}
				  );

			    }else if(type==2){
			      //福利卡
				  const eeui = app.requireModule('eeui');
				  eeui.openPage({url: 'root://pages/member/shopCard/shopCard.js',statusBarType: 'immersion',statusBarStyle:false},
				  	(result) => {
				  		console.log('成功')
				  	}
				  );
			    }else if(type==3){
			      //积分
			    }
			  },
			onrefresh(event) {
				this.refreshing = true
				this.refreshTitle = '加载中...'
				setTimeout(() => {
					this.pageSize = 10
					this.refreshing = false
					this.loadMsgList()
				}, 1000)
			},
			onpullingdown(event) {
				console.log('下拉了')
				this.refreshTitle = '释放刷新页面...'
			},
			onloading(event) {
				this.loadinging = true
				setTimeout(() => {
					this.loadinging = false
					this.pageSize += 10
					this.loadMsgList()
				}, 1000)
			},
			loadMsgList() {
				list({
					pageSize:this.pageSize,
					msgKey: this.msgKey,
					mchId: this.getGlobalData().mchId
				}).then(res => {
					res.data.data.forEach(item => {
						item.sendDate = this.formatTime(item.sendDate)
						item.msgContent = JSON.parse(item.msgContent)
						if (item.msgContent.expireDate) {
							item.msgContent.expireDate =this.formatTime(item.msgContent.expireDate)
						} else {
							item.msgContent.expireDate = null
						}
						if (item.readStatus == 2) {
							item.readStatus = 1
						}
					})
					this.accounts = res.data.data
					markAsRead({
						msgKey: this.msgKey,
					}).then(res => {})
				})
			},
		},
		components: {
		    myNavbar,noDate
        },
	}
</script>

<style scoped>
	.account {
		background-color: rgb(248, 248, 248);
	}

	.navbar {
		width: 750px;
		height: 100px;
		margin-bottom: 20px;
	}

	.icon {
		width: 50px;
		height: 50px;
		color: rgba(42, 42, 54,1);
		opacity: 0.3;

	}
	.refresh {
	    width: 702px;
	    display: -ms-flex;
	    display: -webkit-flex;
	    display: flex;
	    -ms-flex-align: center;
	    -webkit-align-items: center;
	    -webkit-box-align: center;
	    align-items: center;
/*        padding-bottom: 30px;
        padding-top: 30px; */
	  }
	.loading {
		width: 702px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		align-items: center;
        padding-bottom: 30px;
	}
	.message_content {
		display: flex;
		margin-top: 20px;
		padding-right: 30px;
		padding-left: 30px;
		flex-direction: column;

	}

	.message_head {
		margin-left: 5px;
		width: 682px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.message_tittle {
		height: 33px;
		font-size: 34px;
		font-weight: 500;
		color: rgba(26, 26, 30, 1);
		margin-left: 95px;
	}

	.message_all {
		height: 28px;
		font-size: 30px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
	}

	.account_item_content {
		display: flex;
		flex-direction: column;
		padding-left: 24px;
		padding-right: 24px;
		padding-top: 20px;
	}

	.account_item {
		width: 702px;
		display: flex;
		flex-direction: column;
		margin-top: 20px;
		/*margin-bottom: 38px;*/
	}

	.account_time {
		font-size: 24px;
		text-align: center;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		opacity: 0.3;

	}

	.account_item_box {
		width: 702px;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16px;
		margin-top: 38px;
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.item_box_head {
		margin-left: 24px;
		display: flex;
		margin-top: 25px;
		flex-direction: row;
		justify-content: space-between;
	}

	.box_head_img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.box_head {
		display: flex;
		flex-direction: row;
	}

	.box_head_tittle {
		font-size: 28px;
		font-weight: 400;
		/* justify-content: center; */
		/* align-items: center; */
		/* display: flex; */
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
		width: 600px;
		lines:2;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		display: block;
	}

	.infoIcon {
		color: rgba(42, 42, 54, 0.3);
		margin-right: 32px;
	}

	.box_head_subtitle {

		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
		opacity: 0.3;
	}

	.head_subtitle_content {
		margin-left: 24px;
		margin-top: 10px;
	}

	.head_number_content {
		margin-left: 24px;
		margin-top: 5px;
	}

	.box_head_number {
		width: 176px;
		font-size: 24px;
		font-weight: bold;
		color: rgba(34, 34, 38, 1);
		line-height: 35px;
	}

	.head_balance_content {
		margin-left: 24px;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.box_head_balance {
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		opacity: 0.5;
	}

	.head_notice_content {
		margin-left: 24px;
		margin-bottom: 6px;
	}

	.box_head_notice {
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
		opacity: 0.5;
	}
    .indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }
	.indicator-text {
	    color: #888888;
	    font-size: 22px;
	    text-align: center;
		padding-top: 20px;
	}
</style>
